@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;500;700&display=swap');
 /* NAVIGATION BAR-START */
.fullnav{
   display: none;
}
.nav li{
   list-style-type:none;
}
.brand{
   max-width: 209px;
   margin-left:30px;
   margin-top: 20px;
}
.brand1{
   display: none;
}
.burger{
   background-color: #303030;
   min-height:70px;
   position:sticky;
   top:0;
   z-index: 2;
}
.overlay {
   height: 100%;
   width: 0;
   position: fixed;
   z-index:2;
   top: 0;
   left: 0;
   background-color: white;
   overflow-x: hidden;
   transition:0.5s;
   justify-content:end;
 }
 
 .overlay-content {
   position: relative;
   top: 60px;
   width: 100%;
   line-height:60px;
   text-align: left;
   margin-top: 30px;
 }
 .overlay a {
   padding-left:40px;
   text-decoration: none;
   font-family: 'Roboto';
   font-style: normal;
   font-weight: 400;
   font-size: 25px;
   color: #303030;
   display: block;
   transition: 0.3s;
 }
 .list a{
   padding-left:40px;
   text-decoration: none;
   font-family: 'Roboto';
   font-style: normal;
   font-weight: 300;
   font-size: 20px;
   color: #303030;
   display: block;
}
 .overlay a:hover, .overlay a:focus {
   color: #616161;
 }
 
 .overlay .closebtn {
   position: absolute;
   top: 5px;
   right: 30px;
   font-size: 50px;
 }
 .openbtn{
 font-size:40px;
 cursor:pointer;
 color:white;
float: right;
padding-right:20px;
 }
 .openbtn:hover{
 color:#616161;
 }
 /*dropdown*/
 /*dropdown*/
 .produk{
   font-size:20px;
   text-decoration:none;
   font-family: 'Roboto', sans-serif;
   font-weight: 300;
   color:#aeadad;
 }
 .produk:hover{
    color:rgb(213, 211, 211);
 }
 .aprossafe{
    display: flex;
 }
 .chubbsafes{
    display:flex;
 }
 .listitem li, .listitem-lg li{
    list-style-type: none;
 }
 .listitem a, .listitem-lg a{
   color:#303030;
   font-size:18px;
   font-weight: 200;
   padding-left:40px;
   display: none;
 }
 .dropdown1{
    max-width:3.5%;
    margin-top:-5px;
    margin-left:20px;
 }
 .dropdown1:hover{
    cursor:pointer;
 }
 .dropdown2{
   max-width:3.5%;
   margin-top:-5px;
}
.dropdown2:hover{
   cursor:pointer;
}
/*DETAIL NAVBAR*/
.header a{
   font-family: 'Roboto';
   font-style: normal;
   font-weight: 400;
   font-size: 18px;
   color:#303030;
   text-decoration: none;
}
.header:hover{
   background-color: #e9e9e9;
}
.sub{
   font-family: 'Roboto';
   font-style: normal;
   font-weight: 300;
   font-size: 15px;
   color:#616161;
}
.dropdown-menu{
   transform: translateX(-250px);
}
.produkmenu{
   display:flex;
   flex-wrap: wrap;
   background-color: white;;
}
.produkdrop{
   min-width:500px;
}
 /* NAVIGATION BAR-END */
  /* SECTION-START */
 .section1{
    background:#303030;
    padding-top:40px;
    min-height:2600px;
    flex:wrap;
    width:100%;
 
 }
 .video{
   max-width: 420px;
   margin-left:60px;
   margin-bottom: 20px;
 }
 .kolom1{
   display:flex;
   flex:wrap;
 }
 .heading{
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 400;
    font-size: 30px;
    color: #FFFFFF;
    padding-top:40px;
 }
 .kolom2{
   width:95%;
   margin-left:-10px;
   margin-top:0px;
 
 }
 .heading2{
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 400;
    font-size: 30px;
    color: #FFFFFF;
    margin-left:60px;

 }
.subheading2{
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 300;
    font-size: 20px;
    color:#FFFFFF;
    margin-left:60px;
    padding-bottom:20px;
 }
 .kolom3{
    display:flex;
    align-items: center;
    flex:wrap;
    flex-direction: column;
    min-width:90%;
    margin-left:10px;
 }
 .square{
    max-width: 300px;   
    max-height: 680px;
    background: rgba(255, 255, 255, 0.2);
    box-shadow: 0px 0px 40px rgba(0, 0, 0, 0.25);
    border-radius: 10px;
    margin-top:40px;
 }
 .square1{
   max-width: 300px;   
   max-height: 370px;
    background: rgba(255, 255, 255, 0.2);
    box-shadow: 0px 0px 40px rgba(0, 0, 0, 0.25);
    border-radius: 10px;
    margin-top:60px;
 }
 .heading4{
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 400;
    font-size: 25px;
    color:#FFFFFF;
    padding-top: 20px;
    padding-left:20px;
 }
 .subheading3{
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 300;
    font-size: 16px;
    color: rgba(255, 255, 255, 0.87);
    padding-left:30px;
    padding-right: 20px;;
 }
 /* SECTION-END */
 /* FOOTER-START */
.footer{
   background: #616161;
   min-height: 496px;
   padding-left:30px;
   padding-right:20px;
   justify-content: space-around;
   padding-top:30px;
   padding-bottom:20px;
}
.footer1{
   min-width:10%;
}
.logof{
   max-width: 273px;
   max-height: 46px;
   margin-left:5px;
}
.footer_title{
   font-family: 'Roboto';
   font-style: normal;
   font-weight: 400;
   font-size: 22px;   
   color: #FFFFFF;
}
.subtitle_f{
   font-family: 'Roboto'; 
   font-style: normal;
   font-weight: 300;
   font-size: 20px;
   line-height: 129.7%;
   color: #FFFFFF;
   margin-top:20px;
}
.subtitle_f1{
   font-family: 'Roboto';
   font-style: normal;
   font-weight: 300;
   font-size: 18px;
   line-height: 41px;
   color: #FFFFFF;
   list-style-type: none;
   margin-left:-30px;
}
.line_copy{
   background-color: #616161;
   padding:20px;
}
.hr{
   border: 1px solid white;
}
.copyright{
   font-family: 'Roboto';
   font-style: normal;
   font-weight: 300;
   font-size: 15px;
   color: #FFFFFF;
   padding-top:10px;
}
  /* BOTTOM-END */
 body{
     width:100%;
     overflow-x:hidden;
 }
 /* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {
 .section1{
    min-height:2200px;
 }
.square{
   min-width: 467px;   
   min-height: 380px;
}
.square1{
   min-width: 467px;   
   min-height: 410px;
}
.heading4{
   font-size: 30px;
   padding-left:30px;
}
.subheading3{
   font-size: 20px;
}
 }
 /* Large devices (laptops/desktops, 768px and up) */
@media only screen and (min-width: 768px) {
   .section1{
      min-height:2200px;
   }

 }
 /* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {
   .overlay{
      display: none;
   }
   .burger{
      display: none;
   }
   .brand{
      display: none;
   }
   .brand1{
      display: block;
      max-width: 209px;
      margin-left:30px;
      margin-top:5px;
   }
   .menu{
      font-size:20px;
      text-decoration:none;
      font-family: 'Roboto', sans-serif;
      font-weight: 300;
      text-align: center;
      padding-right:20px;
      justify-content: end;
      padding-top:5px;
      }
    .fullnav{
      background-color: #303030;
      color:white;
      max-height: 60px;
      display: flex;
      }
      .openbtn{
         display: none;
      }
      .kolom3{
         display:flex;
         align-items: center;
         flex:wrap;
         justify-content: space-evenly;
         flex-direction: row;
      }
      .square{
         min-width: 427px;   
         min-height: 340px;
      }
      .square1{
         min-width: 427px;   
         min-height: 370px;
      }
      .heading4{
         font-size: 28px;
      }
      .subheading3{
         font-size: 18px;
      }
   }
 /* Large devices (large laptops and desktop, 1200px and up) */
@media only screen and (min-width: 1200px) {
      .footer{
      display: flex;
      flex:wrap;
      justify-content: space-evenly;
      padding-left:40px;
      min-height: 350px;;
         }
      .isifooter{
      display: flex;
      flex:wrap;
      justify-content: space-evenly; 
      width:70%;
      }
      .logof{
         min-width: 273px;
         min-height: 6px;
      }
      .line_copy{
         margin-top:-70px;
         padding-bottom:10px;
      }
      .footer_title{
         font-size: 25px;;
      }
      .section1{
         min-height:1700px;
      }
      .kolom2{
         width:98%;
      }
      .kolom3{
         margin-left:40px;
      }
      .square{
         min-width: 467px;   
         min-height: 380px;
      }
      .square1{
         min-width: 467px;   
         min-height: 400px;
      }
      .heading4{
         font-size: 30px;
      }
      .subheading3{
         font-size: 20px;
      }
 
 }